<template>
  <div class="player_bar">
    <div class="bar_l">
      <div class="img_wrap">
        <img :src="song_info.picUrl" alt />
      </div>
    </div>
    <div class="bar_m">
      <div>{{song_info.song_name}}</div>
      <div>{{song_info.ars | ars_filter}}</div>
    </div>
    <div class="bar_r">
      <i class="iconfont icon-prev" @click.stop="$emit('prev')"></i>
      <i class="iconfont icon-play" v-if="!play_state" @click.stop="play_song"></i>
      <i class="iconfont icon-pause" v-else @click.stop="pause_song"></i>
      <i class="iconfont icon-next" @click.stop="$emit('next')"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["play_state", "song_info"]),
  },
  methods: {
    pause_song() {
      this.$audio.pause();
    },
    play_song() {
      this.$audio.play();
    },
  },
  filters: {},
};
</script>

<style lang="scss" scoped>
.player_bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: skyblue;
  display: flex;
  .bar_l {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    .img_wrap {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
  }
  .bar_m {
    width: 50%;
  }
  .bar_r {
    width: 30%;
    display: flex;
    align-items: center;
    i {
      font-size: 35px;
    }
  }
}
</style>